import React, { useEffect, useState } from 'react';
import { useNavigate, NavLink } from 'react-router-dom'
import { Button, Form, Checkbox, Input, Divider, Space, Table, Tag, Modal, Radio, notification } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { shixiang_list, shixiang_shan, shixiang_cha } from '../../../api/shiku';
import './shijianku.css'
import './Shixiangku.scss'
interface Props {

}
const { TextArea } = Input;
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
function Shixiangku(props: Props) {
  const [form2] = Form.useForm();
  var [biaoge, setBiao] = useState<DataType[]>([])
  var navigate = useNavigate();
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  // 弹出框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    //    console.log(form2.getFieldsValue())
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    console.log('执行力')
    setIsModalOpen(false);
  };


  // 事项列表
  var getlist = async () => {
    var res = await shixiang_list()
    console.log(res.data)
    var shuzu = res.data.map((item: any, index: any) => {
      return {
        ...item,
        key: index
      }
    })
    setBiao(shuzu)
  }
  // 生命周期
  useEffect(() => {
    getlist()
  }, [])
  // 表单重置
  var chongzhi = () => {
    form.setFieldsValue({ title: '', type: '', game: '' })
    getlist()
  }
  // 删除某一条
  var shan = async (can: any) => {
    console.log(can)
    var res = await shixiang_shan(can)
    if (res.data.code == 200) {
      getlist()
      notification.success({
        type: 'success',
        message: '删除成功'
      })
    }

  }

  // 一个方法，专门清除对象中的空属性
  function removeEmptyProperties(obj: any) {
    for (var key in obj) {
      if (obj[key] === null || obj[key] === undefined || obj[key] === '') {
        delete obj[key];
      }
    }
    return obj;
  }



  // 查询
  var cha = async (can: any) => {
    console.log(can)
    var res = await shixiang_cha(removeEmptyProperties(can))
    console.log(res.data)
    var shuzu = res.data.map((item: any, index: any) => {
      return {
        ...item,
        key: index
      }
    })
    setBiao(shuzu)
  }


  //========新增事项
  var tiao = () => {
    navigate('/addshi')
  }
  //====弹出框表单校验成功
  var onFinish2 = (can: any) => {
    handleCancel()

    // setIsModalOpen(false)
    console.log(can)
    // 关闭弹出框
  }
  //====搜索框校验成功
  var onFinish3 = (can: any) => {

    cha(can)
    // setIsModalOpen(false)
    console.log(can)
    // 关闭弹出框
  }
  //====编辑回显跳路由传参
  var bianji = () => {
    navigate({ pathname: '/addshi', search: "id=666&name=力宏" })

  }


  //========表格
  const columns: ColumnsType<DataType> = [
    {
      title: '排序号',
      //   dataIndex: 'name',
      key: 'name',
      render: (_, record: DataType) => {

        return (<span>{biaoge.indexOf(record) + 1}</span>)
      },
    },
    {
      title: '事项名称',
      dataIndex: 'title',
      key: 'title',

    },
    {
      title: '所属目录',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '办理结果名称',
      key: 'game',
      dataIndex: 'game',

    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'state',

    },
    {
      title: '操作人',
      key: 'name',
      dataIndex: 'adminname',
    },
    {
      title: '操作时间',
      key: 'time',
      dataIndex: 'time',
    },
    {
      title: '操作',
      key: 'action',

      render: (_, record: any) => (
        <Space size="middle">
          <Button onClick={() => { }} ><NavLink to="/addshi" state={record} >编辑</NavLink></Button>

          <Button onClick={() => { showModal() }}>取消</Button>
          <Button onClick={() => { shan({ mId: record.mId }) }} >删除</Button>
        </Space>
      ),
    },
  ];


  return (
    <div className='shixiangku'>
      {/* 弹出框 */}
      <Modal title="Basic Modal" open={isModalOpen} footer={(<div></div>)} onOk={handleOk} onCancel={handleCancel}>
        <Form
          form={form2}
          className='shang'

          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          // style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish2}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="取消原因"
            name="reason"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item
            label="设置取消时间"
            name="untime"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >

            <Radio.Group>
              <Radio value="a">立即取消</Radio>
              <Radio value="b">预设取消时间</Radio>


            </Radio.Group>

          </Form.Item>
          <Form.Item className='dingwei'>


            <Button htmlType="submit" >提交</Button>
            <Button onClick={handleCancel}>取消</Button>

          </Form.Item>
        </Form>
      </Modal>
      <main className='main'>
        <Form
          form={form}
          className='shang'
          layout="inline"
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          // style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish3}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="事项名称"
            name="title"

          >
            <Input />
          </Form.Item>

          <Form.Item
            label="所属目录"
            name="type"

          >
            <Input />
          </Form.Item>
          <Form.Item
            label="办理结果名称"
            name="game"

          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 12, span: 4 }}>
            <div className='cx'>
              <Button size='small' type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={() => { chongzhi() }} size='small' >
                重置
              </Button>
            </div>
          </Form.Item>
        </Form>
        {/* 分割线 */}
        <Divider />
        <Button type="primary" onClick={() => { tiao() }}>新增</Button>
        <Table columns={columns} dataSource={biaoge} />
      </main>
    </div>
  );
}

export default Shixiangku;